<template>
	<gracePage class="" headerBG="#F4F4F4" :bounding="false" headerIndex="99999">
		<view slot="gHeader" class="main-bodybg-color">
			<!--  演示一个渐变背景，请根据项目实际需求自行改进  -->
			<view class="grace-header-body">
				<!-- 返回按钮 -->
				<view class="grace-header-icons grace-icons icon-arrow-left " @tap="appFn.navigateBackFn"></view>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex mx-3"><graceSearch @confirm="confirm" background="#FFFFFF"></graceSearch></view>
				<!-- #ifdef MP -->
				<text class="grace-header-icons pr-3" style="width: 160rpx;"></text>
				<!-- #endif -->
			</view>
		<!-- 	<view class="grace-nowrap grace-flex-vcenter grace-flex-center main-bodybg-color">
				<view class="graceSelectMenuItem grace-flex-center"><text>全部</text></view>
				<view class="graceSelectMenuItem">
					<graceSelectMenu
						:show="show2"
						:height="500"
						:items="selectMenu2"
						:selectIndex="selectVal2"
						@showMenu="showMenu2"
						@close="closeMenu2"
						@select="select2"
					></graceSelectMenu>
				</view>
			</view> -->
		</view>
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body-box">
			<!-- 全屏 Loading -->
			<graceFullLoading :graceFullLoading="graceFullLoading" logoUrl="/static/images/lodingbg.png"></graceFullLoading>
			<!-- 这个 view 是用于占位的 避免吸顶元素遮住下面的内容 -->
			<!-- <view style="height:140rpx;" class="main-bodybg-color"></view> -->
			<view style="height:100rpx;" class="main-bodybg-color"></view>
			<!-- 页面数据展示 -->
			<view class="grace-bg-white pt-2" style="border-radius: 50rpx;margin-top:-34rpx;">
				<view class="mt-2">
					<scroll-view class="" scroll-y scroll-top="30" :style="{ height: scrollHeight + 'px' }">
						<view style="margin-top: -41rpx;" class="p-2">
							<view style="height:30rpx;"></view>
							<view v-if="collectionLists.length == 0">
								<graceEmptyNew>
									<view slot="img" class="empty-view mt-3">
										<!-- 请根据您的项目要求制作并更换为空图片 -->
										<image class="empty-img" mode="widthFix" src="/static/images/loding.png"></image>
									</view>
									<text slot="text" class="grace-text-small grace-gray">未找到相应的商品,换个词试试吧~</text>
								</graceEmptyNew>
							</view>
							<view v-else>
								<view class="grace-shoppingcard-goods px-2 mb-2" v-for="(goods, indexItem) in collectionLists" :key="indexItem" @click="shopInfoFn(goods.goods_id)">
									<image :src="goods.goods_img" class="grace-shoppingcard-goods-image" style="width: 154rpx;height: 154rpx;" mode="widthFix"></image>
									<view class="grace-shoppingcard-goods-body">
										<view class="grace-shoppingcard-goods-title pt-1">{{ goods.goods_name }}</view>
										<view class="my-shoppingcard-goods-title grace-ellipsis grace-black9 grace-text" v-if="goods.goods_attr">{{ goods.goods_attr }}</view>
										<view class="grace-space-between">
											<view class="grace-wrap grace-flex-vbottom">
												<text class="grace-shoppingcard-goods-price" style="font-size: 24rpx;padding-bottom: 6rpx;">￥</text>
												<text class="grace-shoppingcard-goods-price">{{ goods.shop_price }}</text>
											</view>
										</view>
									</view>
								</view>
								<graceLoading :loadingType="loadingType"></graceLoading>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- <view class="grace-margin-top grace-text-center"><text class="grace-text-small">主体内容,请根据项目需求编写具体代码 (:</text></view> -->
			<!-- 利用侧边抽屉组件实现筛选 -->
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import graceSelectMenu from '@/graceUI/components/graceSelectMenu.vue';
import graceDrawer from '@/graceUI/components/graceDrawer.vue';
import graceSelectTags from '@/graceUI/components/graceSelectTags.vue';
import graceEmptyNew from '@/graceUI/components/graceEmptyNew.vue';
import graceLoading from '@/graceUI/components/graceLoading.vue';
import graceSearch from '@/graceUI/components/graceSearch.vue';
import graceFullLoading from '@/graceUI/components/graceFullLoading.vue';
var systemInfo = require('@/graceUI/jsTools/systemInfo.js');
var graceJS = require('@/Grace.JS/grace.js');
export default {
	data() {
		return {
			scrollHeight: 800,
			graceFullLoading: false,
			// 第2个菜单
			selectVal2: 0,
			show2: false,
			selectMenu2: ['不限价格', '由高到低', '又低到高'],
			oneGoStatus:true,
			sreachText: '',
			page: 1,
			loadingType: 3, // 加载更多的loading,
			collectionLists: []
		};
	},
	async onReady() {
		let _this = this;

		graceJS.select('.grace-body-box', res2 => {
			console.log('res', res2);
			_this.scrollHeight = res2.height - 40;
		});
	},
	onLoad: function(e) {
		console.log(e);
		if (e.sreachText) {
			this.sreachText = e.sreachText;
		}
		this.__init();
	},
	components: {
		gracePage,
		graceSelectMenu,
		graceDrawer,
		graceSelectTags,
		graceSearch,
		graceEmptyNew,
		graceLoading,
		graceFullLoading
	},
	methods: {
		__init(status) {
			this.graceFullLoading = true;
			let _this = this;
			if (status) {
				_this.collectionLists = [];
			}
			_this.loadingType = 1;
			let options = {
				act: 'get_goods',
				keywords: _this.sreachText,
				page: this.page,
				order: this.order,
			};
			this.$HTTP.post('/api/api.php', options).then(data => {
				console.log('data', data);
				if (data.error) {
					if (_this.page == 1) {
						_this.loadingType = 4;
					} else {
						_this.loadingType = 2;
					}
					_this.graceFullLoading = false;
					return;
				}
				_this.collectionLists = _this.collectionLists.concat(data.list);
				_this.loadingType = 3;
				_this.page = _this.page + 1;
				_this.graceFullLoading = false;
			});
		},
		// 下拉选择
		showMenu2: function() {
			this.show2 = true;
		},
		closeMenu2: function() {
			this.show2 = false;
		},
		select2: function(index) {
			this.page = 1;
			switch (index) {
				case 0:
					this.order = '';
					break;
				case 1:
					this.order = 'desc';
					break;
				case 2:
					this.order = 'asc';
					break;
			}
			this.__init(true);
		},
		onReachBottom: function() {
			console.log('下拉到底部');
			//避免多次触发
			if (this.loadingType == 1 || this.loadingType == 2) {
				return;
			}
			this.__init();
		},
		confirm: function(e) {
			if (e == '') return;
			this.sreachText = e;
			this.__init(true);
		},
		// 进入商品详情
		shopInfoFn: function(id) {
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: '/pages/shop/shopInfo/shopInfo?id=' + id,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
	}
};
</script>
<style scoped>
.mt-3 {
	margin-top: 30rpx !important;
}
/* #ifdef H5 */
.grace-fixed-top {
	top: 44px;
}
/* #endif */
.graceSelectMenuItem {
	width: 187rpx;
	line-height: 90rpx;
}

.grace-filter-buttons {
	position: absolute;
	z-index: 9999;
	width: 680rpx;
	left: 0;
	bottom: 0;
	height: 50px;
	box-sizing: border-box;
}
.grace-filter-button {
	width: 600rpx;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 28rpx;
	display: block;
}
.grace-shoppingcard-goods {
	display: flex;
	flex-wrap: nowrap;
}

.grace-shoppingcard-goods-image {
	padding-right: 20rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-goods-body {
	width: 100%;
}
.grace-shoppingcard-goods-title {
	line-height: 30rpx;
	width: 500rpx;
	mix-height: 60rpx;
	max-height: 90rpx;
	overflow: hidden;
}
.my-shoppingcard-goods-title {
	line-height: 30rpx;
	width: 500rpx;
	height: 30rpx;
	border: 1px solid red;
}
.grace-shoppingcard-goods-price {
	color: #f00;
	font-size: 32rpx;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
</style>
